Intersoft WebInput Documentation
How-to: Enable HTML5 Rendering Mode
Send Feedback
Intersoft WebInput > What's New in V4.0 > How-to: Enable HTML5 Rendering Mode

Glossary Item Box

This topic explains how to configure WebInput to emit HTML5 compliance output.

Configure Doc Type

Each doctype declaration in HTML specification produces different results and behaviors, mostly in the layout and rendering aspects. WebInput supports most commonly used doctype and automatically adjust the behaviors and rendering results by detecting the doctype declaration of the HTML page.

In version 4, WebInput has been significantly enhanced to deliver consistent behaviors and layout in HTML5 pages. All features should work exactly as in other doctype.

To enable HTML5 support in WebInput, make sure you have configured the HTML pages to use the proper doctype. The standard doctype for HTML5 is <!DOCTYPE html>.

The following code example shows how to use WebInput in a simple WebForm using HTML5 doctype.

ASPX Copy Code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
<%@ Register Assembly="ISNet.WebUI.WebInput" Namespace="ISNet.WebUI.WebControls" TagPrefix="ISWebInput" %>

<!DOCTYPE html>
<html>
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
         <ISWebInput:WebInput ID="WebInput1" runat="server">
         </ISWebInput:WebInput>
    </div>
    </form>
</body>
</html>

Note that the xmlns attribute is no longer necessary to be defined in the <html> tag. If you upgraded your existing pages, make sure the xmlns attribute is removed from the <html> tag.

Also, to enable percentage height in HTML5, you must define its height in body and html element. Here's the example

ASPX Copy Code
<head runat="server">
    <title></title>
    <style type="text/css">
    html, body
    {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    </style>
</head>

In HTML5, height of an element is refer to its parent's height so this is necessary to define its parent element.

Configure Rendering Mode

To provide the best HTML5 support, WebInput needs to adjust several features that are commonly processed in the server-side such as markup rendering and AJAX callback response. Unfortunately, the HTML5 doctype cannot be automatically detected by the server-side browser capability. As such, WebInput introduces a new property called RenderingMode which you must set explicitly in order to activate HTML5 compliance output.

You can set the rendering mode in a WebInput instance individually by setting the RenderingMode property to HTML5 value, which is shown in the example below.

ASPX Copy Code
<ISWebInput:WebInput ID="WebInput1" runat="server" RenderingMode="HTML5">
</ISWebInput:WebInput>

Alternatively, you can also apply the rendering mode globally through the application-wide configuration, see the following example.

Web.config Copy Code
<add key="ISNet.WebUI.WebInput.v4_0_7200.RenderingMode" value="HTML5"/>
If your project is exclusively targeting HTML5, it's recommended to use application-wide configuration to apply the rendering mode to all WebInput instances in the project.

For more information about application-wide settings in WebInput, see Application Wide Configurations.